<template>
  <n-layout-sider
    :width="220"
    :native-scrollbar="false"
    :collapsed="store.collapsed"
    collapse-mode="width"
    show-trigger="bar"
    bordered
    @update:collapsed="store.toggle"
  >
    <router-link
      to="/"
      #="{ navigate, href }"
      custom
    >
      <!-- prettier-ignore -->
      <n-a class="logo" :href="href" @click="navigate">
        <svg v-if="store.collapsed" class="small" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 120 110">
          <path d="M5,97.5L5,12.5C5,8.35786,8.35786,5,12.5,5L107.5,5C111.642,5,115,8.35786,115,12.5C115,16.6421,111.642,20,107.5,20L20,20L20,97.5C20,101.6421,16.6421,105,12.5,105C8.35786,105,5,101.6421,5,97.5ZM87.5,62.5L47.5,62.5C43.3579,62.5,40,59.1421,40,55C40,50.8579,43.3579,47.5,47.5,47.5L87.5,47.5C91.6421,47.5,95,50.8579,95,55C95,59.1421,91.6421,62.5,87.5,62.5Z" />
        </svg>
        <svg v-else xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1000 110">
          <path d="M995,12.5C995,8.35786,991.642,5,987.5,5L908.75,5C892.8718,5.00000378566,880,17.8718,880,33.75C880.00000378566,49.6282,892.8718,62.5,908.75,62.5L920,62.5C924.1421,62.5,927.5,59.1421,927.5,55C927.5,50.8579,924.1421,47.5,920,47.5L908.75,47.5C901.1584,47.4945,895.0055,41.3416,895,33.75C895.0055,26.1584,901.1584,20.005499999999998,908.75,20L987.5,20C991.642,20,995,16.6421,995,12.5ZM880,97.5C880,101.6421,883.35786,105,887.5,105L966.25,105C982.128,105,995,92.1282,995,76.25C995,60.3718,982.128,47.5,966.25,47.5L955,47.5C950.8579,47.5,947.5,50.8579,947.5,55C947.5,59.1421,950.8579,62.5,955,62.5L966.25,62.5C973.8416,62.5055,979.9945,68.6584,980,76.25C979.9945,83.8416,973.8416,89.9945,966.25,90L887.5,90C883.35786,90,880,93.3579,880,97.5Z" />
          <path d="M874,12.5C874,8.35786,870.642,5,866.5,5L787.75,5C771.8718,5.00000378566,759,17.8718,759,33.75C759.00000378566,49.6282,771.8718,62.5,787.75,62.5L799,62.5C803.1421,62.5,806.5,59.1421,806.5,55C806.5,50.8579,803.1421,47.5,799,47.5L787.75,47.5C780.1584,47.4945,774.0055,41.3416,774,33.75C774.0055,26.1584,780.1584,20.005499999999998,787.75,20L866.5,20C870.642,20,874,16.6421,874,12.5ZM759,97.5C759,101.6421,762.35786,105,766.5,105L845.25,105C861.128,105,874,92.1282,874,76.25C874,60.3718,861.128,47.5,845.25,47.5L834,47.5C829.8579,47.5,826.5,50.8579,826.5,55C826.5,59.1421,829.8579,62.5,834,62.5L845.25,62.5C852.8416,62.5055,858.9945,68.6584,859,76.25C858.9945,83.8416,852.8416,89.9945,845.25,90L766.5,90C762.35786,90,759,93.3579,759,97.5Z" />
          <path d="M641.5,5L746.5,5C750.642,5,754,8.35786,754,12.5C754,16.6421,750.642,20,746.5,20L649,20L649,90L746.5,90C750.642,90,754,93.3579,754,97.5C754,101.6421,750.642,105,746.5,105L641.5,105C637.35786,105,634,101.6421,634,97.5L634,12.5C634,8.35786,637.35786,5,641.5,5ZM726.5,47.5C730.6421,47.5,734,50.8579,734,55C734,59.1421,730.6421,62.5,726.5,62.5L676.5,62.5C672.3579,62.5,669,59.1421,669,55C669,50.8579,672.3579,47.5,676.5,47.5L726.5,47.5Z" />
          <path d="M620.5,90L525.5,90C521.35786,90,518,93.3579,518,97.5C518,101.6421,521.35786,105,525.5,105L620.5,105C624.642,105,628,101.6421,628,97.5C628,93.3579,624.642,90,620.5,90ZM525.5,70C529.6421,70,533,66.6421,533,62.5L533,12.5C533,8.35786,529.6421,5,525.5,5C521.35786,5,518,8.35786,518,12.5L518,62.5C518,66.6421,521.35786,70,525.5,70Z" />
          <path d="M392,12.5L392,97.5C392,101.6421,395.35786,105,399.5,105C403.6421,105,407,101.6421,407,97.5L407,20L483.25,20C490.84159999999997,20.005499999999998,496.994,26.1584,497,33.75C496.994,41.3416,490.84159999999997,47.4945,483.25,47.5L451.8,47.5C448.6189,47.4982,445.7827,49.5034,444.7236,52.503C443.6646,55.5026,444.613,58.8441,447.09000000000003,60.84L499.79,103.34C501.127,104.4109,502.78700000000003,104.9962,504.5,105C508.642,105,512,101.6421,512,97.5C511.997,95.2326,510.972,93.0873,509.21,91.66L473.05,62.5L483.25,62.5C499.128,62.5,512,49.6282,512,33.75C512,17.8718,499.128,5,483.25,5L399.5,5C395.35786,4.999999506219,392,8.35786,392,12.5Z" />
          <path d="M316,5C318.37170000000003,5.0125238,320.5973,6.14758,322,8.06L384.5,93.06C385.46500000000003,94.3401,385.991,95.8972,386,97.5C386,101.6421,382.642,105,378.5,105C376.128,104.9907,373.901,103.8549,372.5,101.94L310,16.939999999999998C309.0367,15.6592,308.5108,14.10259,308.5,12.5C308.5,8.35787,311.8579,5,316,5ZM313.19,60L275.56,60C273.1883,60.0125,270.9627,61.1476,269.56,63.06L247.59,92.88C246.780139,93.9405,246.253603,95.1897,246.0600001,96.51C245.408638,101.4131,249.5985,105.593,254.5,104.93C256.5816,104.6241,258.4485,103.483,259.67,101.77L279.35,75L313.5,75C317.7336,75.002,321.1298,71.5017,321,67.27000000000001C320.7647,63.1457,317.3206,59.9397,313.19,60Z" />
          <path d="M128.5,5L233.5,5C237.642,5,241,8.35786,241,12.5C241,16.6421,237.642,20,233.5,20L136,20L136,90L233.5,90C237.642,90,241,93.3579,241,97.5C241,101.6421,237.642,105,233.5,105L128.5,105C124.35786,105,121,101.6421,121,97.5L121,12.5C121,8.35786,124.35786,5,128.5,5ZM213.5,47.5C217.6421,47.5,221,50.8579,221,55C221,59.1421,217.6421,62.5,213.5,62.5L163.5,62.5C159.3579,62.5,156,59.1421,156,55C156,50.8579,159.3579,47.5,163.5,47.5L213.5,47.5Z" />
          <path d="M5,97.5L5,12.5C5,8.35786,8.35786,5,12.5,5L107.5,5C111.642,5,115,8.35786,115,12.5C115,16.6421,111.642,20,107.5,20L20,20L20,97.5C20,101.6421,16.6421,105,12.5,105C8.35786,105,5,101.6421,5,97.5ZM87.5,62.5L47.5,62.5C43.3579,62.5,40,59.1421,40,55C40,50.8579,43.3579,47.5,47.5,47.5L87.5,47.5C91.6421,47.5,95,50.8579,95,55C95,59.1421,91.6421,62.5,87.5,62.5Z" />
        </svg>
      </n-a>
    </router-link>
    <n-menu
      :value="currentKey"
      :default-expanded-keys="expandedKeys"
      :options="options"
      :root-indent="18"
      @update:value="
        (k: string) => {
          currentKey = k;
        }
      "
    />
  </n-layout-sider>
</template>

<script lang="ts" setup>
import { type MenuOption } from 'naive-ui';
import { computed, h, ref, watchEffect } from 'vue';
import { RouterLink, useRoute } from 'vue-router';

import { useSidebarStore } from '@/store/sidebar';

import { Icon } from '../components';
import { useMenus } from '../composables';

import type { Menu } from '../composables';

const store = useSidebarStore();

// TODO: loading state
const { data: menus } = useMenus();

const mapping = (items: Menu[]): MenuOption[] =>
  items.map((item) => ({
    ...item,
    key: item.id,
    label: item.name != null ? () => h(RouterLink, { to: item }, { default: () => item.label }) : item.label,
    icon: item.icon != null ? () => h(Icon, { type: item.icon }) : undefined,
    children: item.children && mapping(item.children),
  }));

const options = computed(() => (menus.value ? mapping(menus.value) : []));

const route = useRoute();
const currentKey = ref<string>('');
const expandedKeys = ref<string[]>([]);

const routeMatched = (menu: Menu): boolean => {
  return route.name === menu.name && (menu.params == null || JSON.stringify(route.params) === JSON.stringify(menu.params));
};

const matchExpanded = (items: Menu[]): boolean => {
  let matched = false;
  for (const item of items) {
    if (item.children != null) {
      matchExpanded(item.children) && expandedKeys.value.push(item.id);
    }
    if (routeMatched(item)) {
      currentKey.value = item.id;
      matched = true;
    }
  }
  return matched;
};

watchEffect(() => menus.value && matchExpanded(menus.value));
</script>

<style scoped>
.logo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  padding: 12px 20px;
  background: var(--n-color);
  text-decoration: none;
}

.n-layout-sider--collapsed .logo {
  padding: 9px;
}

.logo svg {
  height: 32px;
}
</style>
